<template>
	<view class="container">
		<uni-list>
			<uni-list-item clickable @click="showDetails(p.lid)" v-for="(p,i) in products" :key="i">
				<view class="left-view" slot="header">
					<image :src="$base+p.pic" mode="widthFix"/>
				</view>
				<view class="right-view" slot="body">
					<text class="title">{{p.title}}</text>
					<text class="price">￥{{p.price}}</text>
					<view class="bottom">
						<uni-tag v-if="Number(p.is_onsale)" text="促销" type="error" size="mini"></uni-tag>
						<text>{{p.sold_count}}条热销评论,好评率100%</text>
					</view>
				</view>
			</uni-list-item>
			<uni-load-more :status="isLoading?'loading':(pageNum<pageCount?'more':'noMore')"></uni-load-more>
		</uni-list>
	</view>
</template>

<script>
import { productList } from '../../service'
	export default {
		data() {
			return {
				kw:'',       //商品关键字
				pageNum: 0,  //加载页数
				pageCount:99999, //数据总页数
				products:[], //查询到的商品
				isLoading:false //是否加载数据中
			}
		},
		onPullDownRefresh() {
			this.products = []
			this.pageNum = 0
			this.loadNextPageData()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.loadNextPageData()
		},
		onLoad({bname,kw}) {
			if(bname){
				uni.setNavigationBarTitle({
					title:bname+'馆'
				})
			}
			if(kw){
				this.kw = kw
			}
			this.loadNextPageData()
		},
		methods: {
			showDetails(lid){
				uni.navigateTo({
					url:`/pages/details/details?lid=${lid}`
				})
			},
			async loadNextPageData(){
				//如果加载中或没有更多数据则不查询数据库
				if(this.isLoading||this.pageNum>=this.pageCount){
					return
				}
				//设置加载中为true
				this.isLoading = true
				//加载下一页数据
				let {pageCount,pno,data} = await productList(this.pageNum+1,this.kw)
				this.pageCount = pageCount
				this.pageNum = pno
				this.products = [...this.products,...data]
				// console.log(this.products);
				//设置加载中为false
				this.isLoading = false
			}
		}
	}
</script>

<style lang="scss"> 
	.container {
		.left-view {
			width: 450rpx;
			margin-right: $uni-spacing-row-base;
			image {
				width: 100%;
			}
			
		}
		.right-view {
			.title {
				font-size: $uni-font-size-base;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.price {
				color: $uni-color-primary;
				font-weight: bold;
			}
			.bottom {
				display: flex;
				color: $uni-text-color-grey;
				justify-content: center;
			}
		}
	}
</style>
